<!DOCTYPE html>
<html>
<head>
<title>Chain of Segments</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="600" height="400"></canvas>

<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and parameters ---
  ctx.lineWidth = 2.5;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  
  const y_center = 150;
  const w_h = 50; // width of horizontal segment
  const h_h = 20; // height of horizontal segment
  const w_v = 20; // width of vertical segment
  const h_v = 45; // height of vertical segment
  const conn_radius = 2.5;
  let current_x = 50;

  // --- Helper functions ---
  function drawHorizontal(x, y, w, h) {
    ctx.beginPath();
    ctx.ellipse(x + w / 2, y, w / 2, h / 2, 0, 0, 2 * Math.PI);
    ctx.stroke();
  }

  function drawVertical(x, y, w, h) {
    ctx.beginPath();
    ctx.ellipse(x + w / 2, y, w / 2, h / 2, 0, 0, 2 * Math.PI);
    ctx.stroke();
  }

  function drawConnection(x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill();
  }

  // --- Draw the chain of segments ---
  const chain_start_x = current_x;

  // The sequence of segments is: H, H, V, H, H, V, V, H, V, H, H
  
  // 1. Horizontal
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;

  // 2. Horizontal
  drawConnection(current_x, y_center, conn_radius);
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;

  // 3. Vertical
  drawConnection(current_x, y_center, conn_radius);
  drawVertical(current_x, y_center, w_v, h_v);
  current_x += w_v;

  // 4. Horizontal
  drawConnection(current_x, y_center, conn_radius);
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;

  // 5. Horizontal
  drawConnection(current_x, y_center, conn_radius);
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;

  // 6. Vertical
  drawConnection(current_x, y_center, conn_radius);
  drawVertical(current_x, y_center, w_v, h_v);
  current_x += w_v;

  // 7. Vertical
  drawConnection(current_x, y_center, conn_radius);
  drawVertical(current_x, y_center, w_v, h_v);
  current_x += w_v;
  
  // 8. Horizontal
  drawConnection(current_x, y_center, conn_radius);
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;

  // 9. Vertical
  drawConnection(current_x, y_center, conn_radius);
  drawVertical(current_x, y_center, w_v, h_v);
  current_x += w_v;

  // 10. Horizontal
  drawConnection(current_x, y_center, conn_radius);
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;

  // 11. Horizontal
  drawConnection(current_x, y_center, conn_radius);
  drawHorizontal(current_x, y_center, w_h, h_h);
  current_x += w_h;
  
  const chain_end_x = current_x;

  // --- Draw the axis line with arrow ---
  const y_axis = y_center + h_v / 2 + 40;
  const axis_start_x = chain_start_x - 20;
  const axis_end_x = chain_end_x + 20;
  
  ctx.beginPath();
  ctx.moveTo(axis_start_x, y_axis);
  ctx.lineTo(axis_end_x, y_axis);
  ctx.stroke();

  // Draw the arrowhead
  const arrow_size = 12;
  ctx.beginPath();
  ctx.moveTo(axis_end_x, y_axis);
  ctx.lineTo(axis_end_x - arrow_size, y_axis - arrow_size / 2);
  ctx.moveTo(axis_end_x, y_axis);
  ctx.lineTo(axis_end_x - arrow_size, y_axis + arrow_size / 2);
  ctx.stroke();

  // --- Draw the labels ---
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  const axis_center_x = (axis_start_x + axis_end_x) / 2;
  
  // "nx" label
  ctx.font = "italic 24px 'Times New Roman', serif";
  ctx.fillText("nx", axis_center_x, y_axis + 30);
  
  // "Fig. 2.4." label
  ctx.font = "24px 'Times New Roman', serif";
  ctx.fillText("Fig. 2.4.", axis_center_x, y_axis + 80);

</script>

</body>
</html>